<script setup lang="ts">
import {reactive, ref} from "vue";
import {useRoute, useRouter} from "vue-router";

const currentLeftComponent = ref()

const route = useRoute()


const menuList = reactive([
  {title: "安全报警处理", url: ""},
  {title: "安全报警设置", url: ""},
  {title: "车辆安全分析", url: ""},
  {title: "报警汇总分析", url: ""},
  {title: "安全报警统计", url: ""},
])


function menuClickHandle(url){

}
</script>

<template>
<div class="container">
  <header >
    <el-tabs class="customize">
      <el-tab-pane v-for="item in menuList" :label="item.title"></el-tab-pane>
    </el-tabs>
  </header>
  <main>
    <router-view>
      <keep-alive>
        <component :is="currentLeftComponent"></component>
      </keep-alive>
    </router-view>
  </main>
</div>
</template>

<style scoped lang="scss">
.container{
  height: 100%;
  width: 100%;
}
::v-deep(.customize .el-tabs__nav-wrap::after){
  height: 1px;
  background-color: #e4e7ed59;
}
main{
  flex: 1;
}
header{
  text-align: center;
}
.active{
  background-color: #00AAFF;
  color: white;
}
</style>